<template>
  <div class="home" style="height: 100%">
    <el-container style="height: 100%">
      <el-aside width="200px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
          :router="true"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
        >
          <el-menu-item @click="togleCollapse">||||||||</el-menu-item>
          <el-menu-item
            v-for="item in menus"
            :class="{ 'is-active': item.href == $store.state.menu_active }"
            :index="item.href"
            :key="item.id"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h2 style="margin: 0px 0px; width: 200px">电商后台管理系统</h2>
          <div style="flex: 1"></div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar
                size="large"
                :src="require('@/assets/logo.png')"
              ></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="loginout">注销账号</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main style="padding: 3px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import menusApi from '@/http/menusApi';
import loginApi from '@/http/loginApi';
export default {
  name: 'Home',
  created() {
    this.$store.dispatch('GET_USERINFO_ACTIONS');
    menusApi.getByRoles(this.$store.state.type).then(res => {
      if (res.data.code == 200) {
        this.menus = res.data.data;
      }
    });
  },
  data() {
    return {
      menus: [],
      isCollapse: false,
    };
  },
  methods: {
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMenuSelect(index) {
      this.$store.commit('SET_MENUS_ACTIVE', index);
      console.log(index);
    },
    handleCommand(command) {
      if (command == 'loginout') {
        loginApi.logout().then(res => {
          if (res.data.code == 200) {
            this.$message.info(res.data.msg);
            sessionStorage.clear();
            this.$router.replace('/login');
          }
        });
      }
    },
  },
};
</script>
<style>
.el-header {
  background-color: #ffffff;
  color: #333;
  display: flex;
  align-items: center;
  box-shadow: -3px 0px 3px rgb(0 0 0 / 10%) inset;
}

.el-aside {
  background-color: #545c64;
  width: auto !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item.is-active {
  color: #ffd04b !important;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
